<%--
  Created by IntelliJ IDEA.
  User: DongZhengWei
  Date: 2018/11/14
  Time: 9:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	String _id=request.getParameter("_");
%>

<style>

	#duty-tab-content{
		vertical-align: middle;
		border: 1px solid #888;
		overflow: auto;
		margin-bottom: 0;
	}
	#duty-tab-content>div{
		max-height: 500px;
		min-height: 200px;
	}
	#duty-list>a{
		border-left: none;
		border-right: none;
	}

</style>

<div id="duty-tab-content" class="panel">
	<input type="hidden" id="userId" value="${userId}" />
	<div id="duty-tab-1" class="col-md-6" style="border-right: 1px solid #e9e9e9">
		<ul id="power_tree" class="ztree"></ul>
	</div>

	<div id="duty-tab-2" class="col-md-6 text-center">
		<c:choose>
			<c:when test="${fn:length(dutyList)>0}">
				<div id="duty-list" class="list-group" style="margin-bottom: 0">
					<c:forEach items="${dutyList}" var="duty" varStatus="index">
						<a id="${duty.power.id}" data-duty-id="${duty.id}" class="list-group-item text-left <c:if test="${duty.isMain}">active</c:if>" href="javascript:void(0)">
							${duty.power.department.name} - ${duty.power.post.name}
							<button class="btn btn-xs btn-rounded btn-default pull-right" onclick="duty_list_delete('${duty.power.id}')">删除</button>
						</a>
					</c:forEach>
				</div>
			</c:when>
			<c:otherwise>
				<div id="duty-list" class="list-group" style="margin-bottom: 0">
					<br/>
					<br/>
					<div id="emptyTip">目前还未拥有任何职责..</div>
				</div>
			</c:otherwise>
		</c:choose>
	</div>
</div>


<script>

	$(function(){
	    setTimeout(function(){
            $.fn.zTree.init($("#power_tree"), setting);
	    }, 100);


        $('#duty-tab-1').overlayScrollbars({
            className: "os-theme-thin-dark",
            overflowBehavior : {
                x : "hidden",
	            y : "scroll"
            }
        });

        $('#duty-tab-2').overlayScrollbars({
            className: "os-theme-thin-dark",
            overflowBehavior : {
                x : "hidden",
                y : "scroll"
            }
        });

	});

	var setting = {
	    async : {
	        enable : true,
			url : "<%=path%>/main/power/tree",
			type : "get",
			dataType : "json",
            otherParam :["userId", "${userId}"]
		},
		check : {
	        enable : true,
            chkStyle : "checkbox",
            chkboxType : {"Y" : "", "N" : ""},
            autoCheckTrigger : true
		},
		callback : {
            onAsyncError : zTreeOnAsyncError,
            onAsyncSuccess : zTreeOnAsyncSuccess,
            beforeCheck : zTreeBeforeCheck,
            onCheck : zTreeOnCheck,
            onClick : zTreeOnClick
		}
	};

	//数据加载失败
	function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){
	    console.log("加载失败");
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        treeObj.reAsyncChildNodes(null, "refresh");
	}

	//数据加载成功后
	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        zTree.expandAll(true);  //自动展开所有节点
	}

	//点击一条节点也能选中或取消选中该节点
	function zTreeOnClick(event, treeId, treeNode){
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        var nodes = zTree.getSelectedNodes();
        for (var i=0, l=nodes.length; i < l; i++) {
            zTree.checkNode(nodes[i], null, true,true);
        }
	}

	//选中一条数据之前
	function zTreeBeforeCheck(treeId, treeNode){
        return treeNode.id;
	}

	//选中一条数据
	function zTreeOnCheck(event, treeId, treeNode){
		if(treeNode.checked){
		    duty_add(treeNode);
		}else{
		    duty_delete(treeNode);
		}
	}

	//新增职责
	function duty_add(treeNode){
	    if($("#duty-list>#emptyTip").size()>0){
	        $("#duty-list").empty();
	    }
	    if($("#"+ treeNode.id).size() === 0){
            var newItem = '<a id="'+treeNode.id+'" class="list-group-item text-left" href="javascript:void(0)">'+
	            treeNode.name+
		        '<button class="btn btn-xs btn-rounded btn-default pull-right" onclick="duty_list_delete(\''+  treeNode.id +'\')">删除</button>' +
	            '</a>';
            $("#duty-list").append(newItem);
	    }
	}

	//删除职责
	function duty_delete(treeNode){
	    $("#"+treeNode.id).remove();
	}

	//右边职责列表的删除职责
	function duty_list_delete(powerId){
        var treeObj = $.fn.zTree.getZTreeObj("power_tree");
        var node = treeObj.getNodeByParam("id", powerId, null);
        if(node!=null){
            duty_delete(node);
            treeObj.checkNode(node, false, false);
        }
	}

	//点击列表项设置主要职责
	$("#duty-list").on("click", "a", function(){
	    if($(this).hasClass("active")){
	        $(this).removeClass("active");
	    }else{
            $("#duty-list a").removeClass("active");
            $(this).addClass("active");
	    }
	});

	//保存数据
	function fn_member_duty_save(callback){
        var treeObj = $.fn.zTree.getZTreeObj("power_tree");
        var nodes = treeObj.getCheckedNodes(true);

        var userId = $("#duty-tab-content>#userId").val();
        var powerIds = [];
        for(var i=0;i<nodes.length;i++){
            powerIds.push(nodes[i].id);
        }

        var mainPowerId = $("#duty-list>.active").attr("id");

        __confirm_dialog("", "确定保存当前设置的职责吗", function(){
            __ajax_post("<%=path%>/main/member/saveDuty", {userId : userId, powerIds : powerIds, mainPowerId : mainPowerId}, function(data){
                __toastr(data);
                callback(data);
            });
        }, function(){
            callback();
        });
	}

</script>